/**
 * 01.新知识：echarts5.0渲染全局可视化组件方式
 * 1.先引入echarts5.0的按需引入函数use, 后期可按需引入组件(该方法要在init方法之前使用)
 * 2.再引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
 * 1.引入各类图表, 图标后缀都为Chart
 * 2.引入各类组件, 组件后缀都为Component
 * 3.使用echart5.0的use函数注册全局组件
 * 
 * 02.新知识：Vue3注册全局组件最好的方式, 在components中使用install导出每个Vue.components
 * 
 * 03.新知识：Vue3中的defineEmits使用方式, 先用defineEmits定义需要的父组件事件, 再使用emit调用定义的父组件事件传递数据
 * 
 * 04.新知识：Vue3中可以随时更改script的lang类型, ts常用模板语法, tsx常用defineComponent语法
 * 
 * 05.新知识：Vue3中defineComponent语法定义接收一个对象, 对象中存放vue3的语法糖, 比如emit、setup...
 * 
 * 06.新知识：Vue3中computed不仅可以接收callback, 还可以以对象形式接收get()、set()等两个callback\
 * 
 * 07.新知识：TS普通变量类型限制, xxx: 类型限制 = 初始化数据
 * 
 * 08.新知识：Vue3在TSX利用h函数与compile函数, 配合渲染icon内容
 * 
 * 09.新知识：原生JS中判断对象值是否存在, 如果不考虑跨平台兼容性问题就使用?.比较简洁, 可读性也会提高
 * 
 * 10.新知识：TSX中渲染html在括号中编写, 再用v-slots放入组件需要的插槽数据, 标签中键值对写法 属性 = {} 形式, 编写事件类似原生onClick差不多
 * 
 * 11.新知识：TSX返回DOM内容的方式是一个回调 () => (HTML内容)
 * 
 * 12.新知识：v-model:activeKey是vue自定义props的语法, 子组件中可以接收到数据
 * 
 * 13.新知识：Vue3中reactive类型定义这样写--reactive<{testData: 接口[]}>({ testData: [] })--reactive<类型限制>(初始内容)
 * 
 * 14.新知识：Vue3中reactive数据可以放入ref中进行使用
 * 
 * 15.新知识：常用业务写法 try..catch...finally
 * 
 * 16.新知识：Vue3通过emit调用父组件的事件, 将数据传递出去给父组件, 该emit与prop一样要放在最上面进行使用
 * 
 * 17.新知识：原生JS定义鼠标事件可以直接实例化MouseEvent('事件类型', 事件配置{哪个DOM, 是否冒泡, 是否阻止默认行为})
 * 
 * 18.新知识：dispatchEvent为DOM元素赋予手动触发事件的方法
 * 
 * 19.新知识：Vue3通信的一种方式, provide()提供一个值为后代组件使用, inject()接收provide()提供的值, 该通信方式是跨组件的一种方式
 * 
 * 20.新知识：vue3中的ref()定义数据, 括号中可以不用写任何东西, 这样就等于隐性any
 * 
 * 21.新知识：Vue3中watch数据监听, 两个callback, 第一个callback是监听的数据、第二个callback是数据发生变化后的操作
 * 
 * 22.新知识：TS函数参数类型限制可以各式各样, 看需求走, 如果参数结果比较未知, 建议类型限制
 * 
 * 23.新知识：Vue3组件实例被卸载后调用onUnmounted生命周期
 * 
 * 24.新知识：Vue3组件实例被卸载后调用onUnmounted生命周期, 以下内容视为已卸载
 * 
 * 25.新知识：components模块文件夹里面还可以进行更详细的组件化, 怎么维护舒服怎么组件化拆分
 * 
 * 26.新知识：i18n国际化在Vue3还是使用 $t(xxxx) 进行使用
 * 
 * 27.新知识：vue3插槽可以省略slot, 直接使用 # 代替即可
 * 
 * 28.新知识：arco-design对svg进行了组件化封装, 所以可以直接使用组件化icon
 * 
 * 29.新知识：TS枚举模块化或者放在script最上面, 内容以对象键值对形式, 冒号用等号表示
 * 
 * 30.新知识：Vue3子组件接收数据使用defineProps, 放在最上面进行定义
 * 
 * 31.新知识：Vue3中导入PropType对Props数据进行类型断言
 * 
 * 32.新知识：Vue3任何hook都放在顶部进行定义, Vue生态库的hook优先级最高
 * 
 * 33.新知识：Vue3任何hook都放在顶部进行定义, Vue生态库的hook优先级最高
 * 
 * 34.新知识：Vue3使用计算属性, 导入computed后内容就是一个callback, callback内容与vue2一样
 * 
 * 35.新知识：Vue3子组件中的props数据, 通过props.xxx即可获取
 * 
 * 36.新知识：访问vue3中computed的内容, 需要xxx.value, 否则会拿到proxy返回的代理结果
 * 
 * 37.新知识：css可通过var获取:root或body中定义的样式变量, var(xxxx变量), 即可使用
 * 
 * 38.新知识：:deep(xx), /deep/ xxx, ::v-deep xx等穿透写法看vue3、vue-loader版本的支持进行修改 
 */

// 全局组件模块化注册(已解析components目录代码)
import { App } from 'vue';
// 引入echarts5.0的按需引入函数use, 后期可按需引入组件(该方法要在init方法之前使用)
import { use } from 'echarts/core';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 引入各类图表, 图标后缀都为Chart
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
// 引入各类组件, 组件后缀都为Component
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  GraphicComponent,
} from 'echarts/components';
import Chart from './chart/index.vue';
import Breadcrumb from './breadcrumb/index.vue';

// 使用echart5.0的use函数注册全局组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  GraphicComponent,
]);

export default {
  install(Vue: App) {
    Vue.component('Chart', Chart);
    Vue.component('Breadcrumb', Breadcrumb);
  },
};
